<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<video src="./img/崩铁官网视频.mp4" autoplay loop muted></video>
</head>
<div class="nav">
    <ul>
        <li>
            <a href="#">导航菜单制作 </a>
            <ul class="a1">
            <li><a href="./css作业/键盘焦点.html">键盘焦点</a>
            <li><a href="./css作业/billbill效果.html">billbill效果</a>
        </li>
        </ul>
        <li>
            <a href="#">浮动定位</a>
            <ul class="b">
            <li><a href="./css作业/浮动.html">浮动</a></li>
                <li><a href="./css作业/浮动1.html">浮动1</a></li>
                    <li><a href="./css作业/浮动2.html">浮动2</a></li>
                    <li><a href="./css作业/浮动3.html">浮动3</a></li>
        </li>
        </ul>
        <li>
            <a href="#">购物车图标</a>
            <ul class="c">
            <li><a href="./css作业/购物车.html">购物车</a>
        </li>
        </ul>
        <li>
            <a href="#">CSS动画</a>
            <ul class="d">
            <li><a href="./css作业/2D效果.html">2D效果</a>
            <li><a href="./css作业/3D效果.html">3D效果</a>
            <li><a href="./css作业/动画.html">动画</a>
            <li><a href="./css作业/立方体.html">立方体</a>
        </li>
        </ul>
        <li>
            <a href="https://gitee.com/liu-meixi_0/css-integrated-task-2">仓库</a>
        </li>
        </ul>
    </ul>
<body>
    
</body>
<style>
    video {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -10;
      object-fit: cover;
      }
      .nav{
        width: 625px;
        height: 50px;
        background-color:rgba(0, 0, 0, 0.507);
        margin: 10% 30%;
    }
    ul{
        margin-top: 0px;
        padding-inline-start: 0%;
    }
    .nav>ul>li{
        float: left;
        list-style: none;
        text-align: center;
        height: 50px;
        line-height: 50px;
        width: 125px;
        font-size: 15px;
        font-family: 微软雅黑;
    }
    a{
        color: rgb(255, 255, 255);
        text-decoration: none;
    }
    ul>li:hover{
        background-color:rgb(0, 0, 0);
    }



    .a1{
        list-style: none;
        background-color:rgb(125, 125, 125);
        display: none;
    }
    li:hover>.a1{
        display: block;
    }


    .b{
        list-style: none;
      background-color:rgb(125, 125, 125);
        display: none;
    }
    li:hover>.b{
        display: block;
    }


    .c{
        list-style: none;
      background-color:rgb(125, 125, 125);
        display: none;
    }
    li:hover>.c{
        display: block;
    }


    .d{
        list-style: none;
      background-color:rgb(125, 125, 125);
        display: none;
    }
    li:hover>.d{
        display: block;
    }
    
    </style>
    
</html>